import { memo, useState, forwardRef, useImperativeHandle, useRef, useEffect } from 'react'
import { Input, Select, Form, Button,message } from 'antd'
import bus from '../../../../../utils/eventBus'
import LdDialog from '../../../../../components/LdDialog'
import './index.scss'
const fingerArray = [
    {
        label: '左-小指',
        value: 0
    },
    {
        label: '左-无名指',
        value: 1
    },
    {
        label: '左-中指',
        value: 2
    },
    {
        label: '左-食指',
        value: 3
    },
    {
        label: '左-大拇指',
        value: 4
    },
    {
        label: '右-大拇指',
        value: 5
    },
    {
        label: '右-食指',
        value: 6
    },
    {
        label: '右-中指',
        value: 7
    },
    {
        label: '右-无名指',
        value: 8
    },
    {
        label: '右-小指',
        value: 9
    }
]
const UserDialog = forwardRef((props: any, ref: any) => {
    const { row, nodeData, success, close } = props
    const permissionOptions = useRef([
        { label: '一般涉密', value: 4 },
        { label: '重要涉密', value: 5 },
        { label: '核心涉密', value: 6 },
    ])
    const formRef = useRef<any>(null)
    const [fingerList, setFingerList] = useState<any[]>([])
    const [visibleFinger, setVisibleFinger] = useState<boolean>(false)
    const [loading, setLoading] = useState<boolean>(false)
    const handleDeleteFinger = (index: number, num: any) => {
        setFingerList(fingerList.splice(index, 1))
        window.chromePro.delUserFingerprint(JSON.stringify({
            userId: row.id,
            number: num
        }))
    }
    const showFingerName = (item: number | string) => {
        let fingerName = ''
        fingerArray.some((finger, index) => {
            if (item === finger.value) {
                return fingerName = finger.label
            }
        })
        return fingerName
    }
    const handleRegisterFinger = () => {
        setVisibleFinger(true)
    }
    const handleSave = () => {
        formRef.current.validateFields().then((res: any) => {
            setLoading(true)
            const params = {
                ...row,
                ...res,
                departmentId: nodeData
            }
            if (row) {
                window.chromePro.modUser(JSON.stringify(params));
            } else {
                window.chromePro.addUser(JSON.stringify(params));
            }
        }).catch((err: any) => { })
    }
    const modUserFinished = (data: any) => {
        if (data.code === 200) {
            message.success("编辑成功");
            success && success()
            close && close()
        } else {
            setLoading(false)
            message.error(data.msg);
        }
    }
    const addUserFinished = (data: any) => {
        if (data.code === 200) {
            message.success("新增成功");
            success && success()
            close && close()
        } else {
            setLoading(false)
            message.error(data.msg);
        }
    }
    useEffect(() => {
        bus.addListener("modUserFinished", modUserFinished);
        bus.addListener("addUserFinished", addUserFinished);
        if(row){
            formRef.current.setFieldsValue({
                ...row
            })
        }
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("modUserFinished", modUserFinished);
            bus.removeListener("addUserFinished", addUserFinished);
        }
    }, [])
    return (
        <>
            <LdDialog title={row ? '编辑人员信息' : '新增人员信息'} handleClose={close}>
                <Form ref={formRef} style={{ width: '380px', margin: '0 auto' }} labelCol={{ span: 5 }}>
                    <Form.Item label="姓名" name="name" rules={[{ required: true, message: "请输入姓名" }]}>
                        <Input placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item label="账号" name="account" rules={[{ required: true, message: "请输入账号" }]}>
                        <Input placeholder='请输入账号' />
                    </Form.Item>
                    <Form.Item label="IC卡" name="cardId">
                        <Input disabled placeholder='请将IC卡放置卡片识别区' />
                    </Form.Item>
                    <Form.Item label="人员等级" name="permission" rules={[{ required: true, message: "请选择人员等级" }]}>
                        <Select placeholder="请选择人员等级" options={permissionOptions.current}></Select>
                    </Form.Item>
                    {/* {
                        row ? <Form.Item label="指纹">
                            <div className="finger">
                                {
                                    fingerList.map((item: any, index: number) => {
                                        return (
                                            <>
                                                <div className="finger-list" key={index}>
                                                    <div className="finger-list-box">
                                                        <img src="../../../../../assets/finger/finger.png" alt="" />
                                                        <img src="@/assets/finger/delete-finger.png" className="el-icon-circle-close"
                                                            onClick={() => handleDeleteFinger(index, item)} />
                                                    </div>
                                                    <span className="finger-name">{showFingerName(item)}</span>
                                                </div>
                                                <Button disabled={fingerList.length >= 5} className="el-icon-plus" onClick={handleRegisterFinger}></Button>
                                            </>
                                        )
                                    })
                                }
                            </div>
                        </Form.Item> : null
                    } */}
                </Form>
                <div className="footer">
                    <Button onClick={close} className="footer-btn1">取消</Button>
                    <Button loading={loading} type="primary" onClick={handleSave} className="footer-btn">保存</Button>
                </div>
            </LdDialog>
        </>
    )
})
export default memo(UserDialog)
